{% extends 'base.html' %}
{% block body %}
{% block css %}
<style>

    .user_head {
        position: relative;
        width: 100px;
        height: 100px;
        border: red;

    }
    .user_head .user_head_up{
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: 100;
        opacity: 0;
        left: 0;
        top: 0;
    }
.user_head .user_head_up input{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}


    .user_head img {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 90;
        border-radius: 50%;
        top: 0;
        left: 0;
    }


    /* 让侧边栏宽度更大 */
    #sidebar.sidebar {
        width: 200px; /* 根据需要调整宽度 */
        background-color: black; /* 设置背景颜色为黑色 */
        color: white; /* 设置文本颜色为白色以便在黑色背景上可见 */
    }

    /* 确保侧边栏中的链接在黑色背景上可见 */
    #sidebar .nav-link {
        color: white;
    }

    #sidebar .nav-link.active,
    #sidebar .nav-link:hover {
        background-color: #333; /* 稍微亮一点的黑色作为激活或悬停时的背景色 */
        color: white; /* 确保文本颜色在悬停时也是白色 */
    }
    .flex-column{
        height: 600px;
    }
    .nav-item .nav-link{
        height: 60px;
        font-size: 24px;
    }
</style>
{% endblock %}
{% include 'header.html' %}
<div class="container" style="margin-top: 70px;">
    <div class="row">
        <!-- 侧边栏 -->
        <nav id="sidebar" class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="sidebar-sticky">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'user:center' %}" >
                            个人资料
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'user:message' %}">
                            消息通知
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'user:update_password' %}" >
                            修改密码
                        </a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link active" href="{% url 'user:logout' %}" >
                            退出账号
                        </a>
                    </li>


                    <!-- 重复以上li元素以添加更多项 -->
                </ul>
            </div>
        </nav>
        <!-- 主内容区 -->
        <div class="col-md-9">
            <div class="tab-content">
               {% block info %}
                {% endblock %}

            </div>
        </div>
    </div>
</div>


<script>
    window.onload = function () {
        let input = document.querySelector(".user_head input");
        let img = document.querySelector('.user_head img')
        input.onchange = function () {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {

                    img.src = e.target.result;
                }

                reader.readAsDataURL(file); // 将文件读取为 Data URL
            }
        }
    }
</script>
{% include 'footer.html' %}

{% endblock %}